<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7/dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="../../css/index.css" />
<link rel="stylesheet" type="text/css" href="../../css/background.css" />

<script type="text/javascript" src="../../bootstrap-3.3.7/dist/js/jquery.min.js"></script>
<script type="text/javascript" src="../../bootstrap-3.3.7/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="../../js/bootstrap-paginator.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../bootstrap-3.3.7/docs/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<%@include file="../common/header.jsp"%>
			</div>
			<div class="col-md-12 column" style="margin-top: 20px;">
				<div class="row">
					<div class="col-md-2 column" style="margin-left: 20px;">
						<select class="combobox" id="type" style="height: 30px; width: 75%; float: right; margin-left: 0px">
							<option value="name">姓名</option>
							<option value="region">研究领域</option>
						</select>
					</div>
					<div class="col-md-8 column">
						<div class="input-group">
							<input type="text" id="content" class="form-control" placeholder="请输入搜索内容"> <span class="input-group-btn">
								<button class=" btn btn-warning" type="button" onclick="search()">
									<span class="myfont">检索</span>
								</button>
							</span>
						</div>
					</div>
				</div>
				<div class="row" style="min-height:500px;padding-top: 10px;" id="tip">
					<div class="myline"></div>
					<ul class="myul" style="padding-top: 5px;margin-left:30px" id="info">
						<c:forEach items="${zjlist}" var="zj">
							<li style="margin-top:20px">
								<div class="row">
									<div class="col-md-2" style="padding-left:80px">
										<c:choose>
											<c:when test="${empty zj.userzj_picture}">
												<a href="../specialist/getZJDetail?zjid=${zj.userzj_id}"><img src="../../image/user/default.jpg" style="width:90px;height:120px"></img></a>
											</c:when>
											<c:otherwise>
												<a href="../specialist/getZJDetail?zjid=${zj.userzj_id}"><img src="../../image/user/${zj.userzj_picture}" style="width:90px;height:120px"></img></a>
											</c:otherwise>
										</c:choose>
									</div>
									<div class="col-md-7" style="margin-left:90px;">
										<a href="../specialist/getZJDetail?zjid=${zj.userzj_id}" style="padding-top: 0px"><h4>
												<span class="text-primary">${zj.userzj_name}</span>
											</h4></a>
											<c:choose>
												<c:when test="${empty zj.userzj_profession}">
												</c:when>
												<c:otherwise>
														(${zj.userzj_profession})</br>
												</c:otherwise>
											</c:choose>
										<c:choose>
											<c:when test="${empty zj.userzj_region}">

											</c:when>
											<c:otherwise>
													<small class="text-muted">研究领域:</small> <span>${zj.userzj_region}</span>
											</c:otherwise>
										</c:choose>


									</div>
								</div>
							</li>
						</c:forEach>
					</ul>
				</div>
				<div class="row">
					<div class="col-md-3"></div>
					<ul id="paginator" style="padding-left: 40px"></ul>
				</div>
			</div>
		</div>

		<div class="row clearfix">
			<div class="col-md-12 column">
				<%@include file="../common/bottom.jsp"%>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
//当前页面总页数
var totalpage;
//当前页面中的专家列表
var list;
$(function() {
	calculatetotalpage();
});


function search(){
	calculatetotalpage();
	$.ajax({
		url : '../specialist/getzjlist',
		type : 'post',
		async : false,
		data : {
			page : 1,
			type : $("#type").val(),
			content : $("#content").val()
		},
		success : function(result) {
			var data = eval(result);
			list=data;
			$("#info").html("");
			//循环
			var li = "";
			for (var i = 0; i < data.length; i++) {
				li += "<li>";
				li += "<div class='row'>";
				li += "<div class='col-md-2' style='padding-left:60px'>";
				if (data[i].userzj_picture != null&& data[i].userzj_picture != ""){
					li += "<a href='../specialist/getZJDetail?zjid="+data[i].userzj_id+"'><img src='../../image/user/"+data[i].userzj_picture+"' style='width: 90px; height: 120px;'></img></a>";
				}	
				else {
					li += "<a href='../specialist/getZJDetail?zjid="+data[i].userzj_id+"'><img src='../../image/user/default.jpg' style='width: 90px; height: 120px;'></img></a>";
				}
				li += "</div>";
				li += "<div class='col-md-7' style='margin-left:90px'>";
				li += "<a href='../specialist/getZJDetail?zjid="+data[i].userzj_id+"' style='padding-top:0px'><h4><span class='text-primary'>"+ data[i].userzj_name+ "</span></h4></a>";
				li += "<p>" + data[i].userzj_company;
				if(data[i].userzj_profession!=null&&data[i].userzj_profession!=""){
					li += "("+ data[i].userzj_profession+ ")</p>";
				}
				else{
					li +="<p>";
				}
				if(data[i].userzj_region!=null&&data[i].userzj_region!=""){
					li += "<p><small class='text-muted'>研究领域:</small> <span>"+ data[i].userzj_region+ "</span></p>";
				}
				li += "</div>";
				li += "</div>";
			}
			//循环
			$("#info").append(li);
		}
	});
	
}
	//计算出totalpage
	function calculatetotalpage() {
		$.ajax({
			url : '../specialist/getzjcount',
			type : 'get',
			async : false,
			data : {
				type : $("#type").val(),
				content : $("#content").val()
			},
			success : function(result) {
				if (result % 6 == 0) {
					totalpage = result / 6;
				}
				if (result % 6 != 0) {
					totalpage = result / 6 + 1;
				}
				if (totalpage == 0) {
					$("#info").html("");
					$("#tip").append('<div style="text-align: center;"><span>抱歉，没有找到相关信息</span></div>');	
					$("#paginator").html("");
				} else {
					paginator(totalpage);
				}

			}
		});
	}

	function paginator(value) {
		var element = $('#paginator');
		var options = {
			bootstrapMajorVersion : 3, //对应的bootstrap版本
			currentPage : 1, //当前页数，这里是用的EL表达式，获取从后台传过来的值
			numberOfPages : 6, //每页页数
			totalPages : value, //总页数，这里是用的EL表达式，获取从后台传过来的值
			shouldShowPage : true,//是否显示该按钮
			itemTexts : function(type, page, current) {//设置显示的样式，默认是箭头
				switch (type) {
					case "first" :
						return "首页";
					case "prev" :
						return "上一页";
					case "next" :
						return "下一页";
					case "last" :
						return "末页";
					case "page" :
						return page;
				}
			},
			onPageClicked : function(event, originalEvent, type, page) {
				$
						.ajax({
							url : '../specialist/getzjlist',
							type : 'get',
							async : false,
							data : {
								page : page,
								type : $("#type").val(),
								content : $("#content").val()
							},
							success : function(result) {
								var data = eval(result);
								$("#info").html("");
								//循环
								var li = "";
								for (var i = 0; i < data.length; i++) {
									li += "<li>";
									li += "<div class='row'>";
									li += "<div class='col-md-2' style='padding-left:50px'>";
									if (data[i].userzj_picture != null && data[i].userzj_picture != "") {
										li += "<a href='../specialist/getZJDetail?zjid="
												+ data[i].userzj_id
												+ "'><img src='../../image/user/"+data[i].userzj_picture+"' style='width: 90px; height: 120px;'></img></a>";
									} else {
										li += "<a href='../specialist/getZJDetail?zjid="
												+ data[i].userzj_id
												+ "'><img src='../../image/user/default.jpg' style='width: 90px; height: 120px;'></img></a>";
									}
									li += "</div>";
									li += "<div class='col-md-7' style='margin-left:90px'>";
									li += "<a href='../specialist/getZJDetail?zjid="
											+ data[i].userzj_id
											+ "' style='padding-top:0px'><h4><span class='text-primary'>"
											+ data[i].userzj_name
											+ "</span></h4></a>";
									li += "<p>" + data[i].userzj_company;
									if (data[i].userzj_profession != null && data[i].userzj_profession != "") {
										li += "(" + data[i].userzj_profession
												+ ")</p>";
									} else {
										li += "<p>";
									}
									if (data[i].userzj_region != null
											&& data[i].userzj_region != "") {
										li += "<p><small class='text-muted'>研究领域:</small> <span>"
												+ data[i].userzj_region
												+ "</span></p>";
									}
									li += "</div>";
									li += "</div></li>";
								}
								//循环
								$("#info").append(li);
							}
						});
			}
		};
		element.bootstrapPaginator(options);
	}
</script>
</html>